<template>
	<view class="container-main" v-if="user_detail" :style="{ '--top-bar-height': mp.topBarHeight + 'px', '--safe-area-bottom': mp.systemInfo.safeAreaInsets.bottom + 'px'}">
		<view class="container-main-top"></view>
		<view class="user-info" v-if="user_detail.isVip == 1">
			<image class="head" src="@/static/images/user.png" mode="aspectFill"></image>
			<view class="user">
				<view class="name">尊享剧场用户</view>
				<view class="uid-info">
					<view class="uid">UID:{{user_detail.id || 0}}</view>
					<view class="copy" @tap.stop.prevent="copy(user_detail.id)">复制</view>
				</view>
			</view>
		</view>
		<view class="user-info user-info-vip" v-if="user_detail.isVip == 0">
			<view class="user-info-top">
				<view class="user-head">
					<image class="head" src="@/static/images/user.png" mode="aspectFill"></image>
					<image class="vip" src="https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/peng-jc/vip-id.png" mode="aspectFill"></image>
				</view>
				<view class="user">
					<view class="name">尊享剧场用户</view>
					<view class="uid-info">
						<view class="uid" style="font-size: 24rpx;">{{ user_detail.vipExpirationTime | vipTimeFormat}} 到期</view>
					</view>
				</view>
			</view>
			<view class="uid-info-uid">
				<view class="uid">UID:{{user_detail.id || 0}}</view>
				<view class="copy" @tap.stop.prevent="copy(user_detail.id)">复制</view>
			</view>
		</view>
		<view class="section" v-if="user_detail && false">
			<view class="top-up-now">
				<view class="jinb">金币余额：{{user_detail.myBalanceVO.accountBalance}}</view>
				<view class="top-up" @tap.stop.prevent="goTopUp">去充值</view>
			</view>
		</view>
		<view class="section section-menu">
			<view class="menu-list">
				<view class="menu-item" v-for="item in menuList" :key="item.id">
					<view class="menu-item-page" v-if="item.url" @tap.stop.prevent="goMenuPage(item)">
						<view class="dy-iconfont" :class="item.icon"></view>
						<view class="name">{{ item.name }}</view>
					</view>
					<view class="menu-item-page" v-else-if="item.id == 'collect' && mp.systemInfo.platform != 'ios'" @tap.stop.prevent="goMenuPage(item)">
						<view class="dy-iconfont" :class="item.icon"></view>
						<view class="name">{{ item.name }}</view>
					</view>
					<!-- #ifdef MP-WEIXIN -->
					<button class="menu-item-btn" v-else-if="item.id == 'service'" open-type="contact">
					<!-- #endif -->

						<!-- #ifdef MP-TOUTIAO -->
						<button class="menu-item-btn" v-else-if="item.id == 'service'" data-im-id="miliner." open-type="im" @error="onimError">
						<!-- #endif -->
							<view class="dy-iconfont" :class="item.icon"></view>
							<view class="name">{{ item.name }}</view>
						</button>
				</view>
			</view>
		</view>
		<!-- tabber -->
		<tabbar :current="tabbarCurrent" backdropFilter :tabBar="tabBar"></tabbar>
		<addition-pop ref="addition"></addition-pop>
	</view>
</template>

<script>
	const app = getApp();
	import mp from '@/mixins/mp.js';
	import tabbar from '@/components/custom-tabbar/custom-tabbar.vue';
	import { timeFormat, os } from '@/uni_modules/uv-ui-tools/libs/function/index.js';
	import { myDetail } from '@/common/api';

	export default {
		mixins: [mp],
		components: {
			tabbar
		},
		data() {
			return {
				tabbarCurrent: 2, //当前索引
				tabBar: app.globalData.tabBar,
				user_detail: null,
				loading: false,
				// 菜单列表
				menuList: [
					// {
					// 	id: 'recharge',
					// 	name: '充值记录',
					// 	icon: 'icon-chongzhijilu',
					// 	url: 'page_user/recharge/recharge'
					// }, {
					// 	id: 'expense',
					// 	name: '消费记录',
					// 	icon: 'icon-xiaofeijilu',
					// 	url: 'page_user/expense/expense'
					// }, 
					{
						id: 'watch',
						name: '观看记录',
						icon: 'icon-guankanjilu',
						url: 'page_user/recorder/recorder'
					},
					{
						id: 'collect',
						name: '收藏小程序',
						icon: 'icon-shoucang',
						url: ''
					},

					// {
					// 	id: 'service',
					// 	name: '在线客服  （9:00 - 22:00）',
					// 	icon: 'icon-kefu',
					// 	url: ''
					// },

					// #ifdef MP-TOUTIAO
					{
						id: 'sidebar',
						name: '下次再看',
						icon: 'icon-santiaoxian_',
						url: 'xxxx'
					}

					// {
					// 	id: 'collect',
					// 	name: '收藏小程序',
					// 	icon: 'icon-shoucang',
					// 	url: ''
					// },
					// #endif

				]
			};
		},
		onLoad(option) {},
		onShow() {
			this.getUserDetails()
			if (uni.canIUse('hideTabBar')) {
				uni.hideTabBar()
			}
		},
		onHide() {},
		filters: {
			vipTimeFormat(val) {
				return timeFormat(val)
			}
		},

		methods: {
			getUserDetails() {
				uni.showLoading({ title: '正在加载', mask: true });
				this.loading = false
				myDetail().then((res) => {
					let data = res
					data.myBalanceVO.accountBalance = data.myBalanceVO.accountBalance ? data.myBalanceVO.accountBalance : 0
					this.user_detail = data
					console.log(this.user_detail);
				}).finally(() => {
					uni.hideLoading();
					this.loading = true
				})
			},
			// 跳转菜单页面
			goMenuPage(menu) {
				if (menu.id == 'sidebar') {
					// #ifdef MP-TOUTIAO
					tt.navigateToScene({
						scene: 'sidebar',
						activity: '',
						success: (data) => {
							console.log(data)
						},
						fail: (data) => {
							console.log(data)
						}
					})
					// #endif
				} else if (menu.url) {
					app.navigationTo(menu.url);

				} else {
					this.$refs.addition.show();
				}
			},
			onimError(e) {
				console.log("拉起IM客服失败", e.detail);
			},
			copy(content) {
				uni.setClipboardData({
					data: content,
					success: function() {
						uni.showToast({
							title: '已复制',
							icon: 'success',
							duration: 2000
						});
					},
					fail: function(err) {
						console.log(err);
					},
				});

			},
			goTopUp() {
				app.navigationTo('page_user/wallet/wallet');
			}
		}
	};
</script>

<style lang="scss">
	page {
		/* #ifdef MP-WEIXIN */
		background: #000;
		/* #endif */
		background-image: url('https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/peng-jc/new_bg.png');
		background-repeat: no-repeat;
		background-size: 100% 1071rpx;
		background-position: 0 0;
	}

	.container-main {
		box-sizing: border-box;
		padding-top: calc(var(--top-bar-height) + 32rpx);
		padding-bottom: calc(var(--safe-area-bottom) + 124rpx);
		padding-left: 24rpx;
		padding-right: 24rpx;

		.container-main-top {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 99;
			width: 100%;
			height: calc(var(--top-bar-height) + 24rpx);
			background: #000;
			background-image: url('https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/peng-jc/new_bg.png');
			background-repeat: no-repeat;
			background-size: 100% 1071rpx;
			background-position: 0 0;
		}

		.user-info {
			margin-bottom: 43rpx;

			&.user-info-vip {
				box-sizing: border-box;
				padding: 89rpx 36rpx 30rpx 36rpx;
				width: calc(100vw - 24rpx - 24rpx);
				height: 319rpx;
				background-image: url("https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/peng-jc/vip-bg.png");
				background-repeat: no-repeat;
				background-size: contain;
				margin-top: -16rpx;
				margin-bottom: 16rpx;

				.user-info-top {
					margin-bottom: 50rpx;
					display: flex;
					align-items: center;

					.user-head {
						width: 110rpx;
						height: 110rpx;
						margin-right: 20rpx;
						position: relative;

						.head {
							width: 100%;
							height: 100%;
						}

						.vip {
							position: absolute;
							bottom: -19rpx;
							left: 50%;
							transform: translateX(-50%);
							width: 78rpx;
							height: 34rpx;
						}
					}

					.user {
						width: calc(100% - 110rpx - 20rpx);
					}
				}

				.uid-info-uid {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.uid {
						font-weight: 400;
						font-size: 28rpx;
						color: rgba(255, 255, 255, 0.8);
						line-height: 40rpx;
					}

					.copy {
						width: 86rpx;
						height: 40rpx;
						border-radius: 8rpx;
						border: 1rpx solid #979797;
						font-weight: 400;
						font-size: 26rpx;
						color: #FFFFFF;
						line-height: 40rpx;
						text-align: center;
					}
				}
			}

			.head {
				width: 140rpx;
				height: 140rpx;
				border-radius: 50%;
				margin-right: 24rpx;
				display: inline-block;
				vertical-align: middle;
			}

			.user {
				display: inline-block;
				vertical-align: middle;
				width: calc(100% - 140rpx - 24rpx);

				.name {
					font-weight: 900;
					font-size: 36rpx;
					color: #ffffff;
					line-height: 50rpx;
					margin-bottom: 20rpx;
				}

				.uid-info {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.uid {
						font-weight: 400;
						font-size: 28rpx;
						color: rgba(255, 255, 255, 0.8);
						line-height: 40rpx;
					}

					.copy {
						width: 86rpx;
						height: 40rpx;
						border-radius: 8rpx;
						border: 1rpx solid #979797;
						font-weight: 400;
						font-size: 26rpx;
						color: #FFFFFF;
						line-height: 40rpx;
						text-align: center;
					}
				}
			}
		}

		.section {
			border-radius: 20rpx;
			border: 1rpx solid transparent;
			background-clip: padding-box, border-box;
			background-origin: padding-box, border-box;
			background-image: linear-gradient(#160f15, #160f15), linear-gradient(137deg, rgba(255, 255, 255, 0.31), rgba(255, 255, 255, 0.1));
			backdrop-filter: blur(8px);
			box-sizing: border-box;
			padding: 30rpx 36rpx;

			.top-up-now {
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			.jinb {
				font-weight: 600;
				font-size: 32rpx;
				color: #ffffff;
				line-height: 45rpx;
			}

			.top-up {
				width: 118rpx;
				height: 56rpx;
				background: #ff7f00;
				border-radius: 28rpx;
				font-weight: 600;
				font-size: 26rpx;
				color: #000000;
				line-height: 56rpx;
				text-align: center;
			}
		}

		.section-menu {
			font-weight: 400;
			font-size: 28rpx;
			color: #ffffff;
			line-height: 40rpx;
			padding: 36rpx;
			margin-top: 16rpx;

			.menu-list {
				.menu-item {
					margin-bottom: 72rpx;

					&:last-child {
						margin-bottom: 0;
					}

					&:nth-child(2) {
						.dy-iconfont {
							font-size: 50rpx !important;
						}
					}

					.menu-item-page,
					.menu-item-btn {
						.dy-iconfont {
							display: inline-block;
							vertical-align: middle;
							font-size: 42rpx;
							margin-right: 16rpx;
						}

						.icon-xiaofeijilu {
							font-size: 42rpx !important;
						}

						.name {
							display: inline-block;
							vertical-align: middle;
						}
					}

					.menu-item-btn {
						text-align: start;
						margin: 0;
						padding: 0;
						background: none;
						font-weight: 400;
						font-size: 28rpx;
						color: #ffffff;
						line-height: 40rpx;
					}
				}
			}
		}
	}
</style>